<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>好运网</title>
  <link rel="stylesheet" type="text/css" href="/css/basic.css"/>
  <link rel="stylesheet" type="text/css" href="/css/style.css"/>
  <link rel="stylesheet" type="text/css" href="/css/center.css"/>
  <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
  <link href="/css/public.css" rel="stylesheet"/>
  <script src="/js/jquery-1.4.2.min.js"></script>
</head>
<body>

<div  th:fragment="questionDialog">

  <link rel="stylesheet" type="text/css" href="/css/basic.css"/>
  <link rel="stylesheet" type="text/css" href="/css/style.css"/>
  <link rel="stylesheet" type="text/css" href="/css/center.css"/>

  <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
  <link href="/css/public.css" rel="stylesheet" />
  <script src="/js/jquery-1.4.2.min.js"></script>
  <script src="/js/common.js"></script>


  <script type="text/javascript" src="js/message.js"></script>

  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <div class="as_fl20_right">
    <div class="as_bet_email">
      <div class="as_email_title">
        <h3>站内信</h3>
      </div>
      <div class="email_title_box">
        <div class="email_nav_title"><ul>

          <a href="systemMessageReceive"> <li><span  data-id="take_email">收件箱 </span></li></a>
          <a href="/questionDialog"> <li class="middle"><span class="on" data-id="send_email">发件箱  <i>1</i></span></li></a>
          <a href="/questionWrite"> <li><span  data-id="write_email">写消息</span></li></a>
        </ul>
        </div>
        <div id="take_email" class="take_email email_nr" style="display:block">
          <table>
            <tbody><tr><th width="5%"></th>
              <th width="20%">时间</th>
              <th>标题</th>
              <th width="10%">状态</th>
            </tr>
            <tr value="30433" class="ms_table_row" th:each="item:${list}">
              <td></td>
              <td th:text="${#dates.format(item.createTime,'yyyy--MM-dd HH:mm:ss')}"></td>
              <td><a href="javascript:void(0);" class="jkp" th:attr="date=${#dates.format(item.createTime,'yyyy--MM-dd HH:mm:ss')},data=${item.questionContent},questionId=${item.id}"  th:text="${item.questionTitle}" >欢迎加入锦绣</a></td>

              <td class="message_isView" th:if="${item.status ==0}">未读</td>
              <td class="message_isView" th:if="${item.status==1}">已读</td>

            </tr>
            <tr><td colspan="5" style="background:#f5f5f5"></td></tr>
            </tbody></table>
        </div>
      </div>
    </div>
  </div>



  <script type="text/javascript" src="js/message.js"></script>
  <div class="m_pop" style="display:none;">
    <div id="parentBorder"  class="border">
      <div class="m_detailmain">
        <div class="top">
          <span class="top_title">发件箱</span>
          <div class="close" onclick="$('.m_pop').hide();"></div>
        </div>


        <div class="title" v-for="item in dialoglist" v-if="item.questionId==0" >
          <div class="title_1">
            {{item.questionTitle}}
            <div id="mess_del" class="delete"></div>
          </div>
          <span>{{item.createTime}}</span>
        </div>

        <div class="dialogue"  id="app-4">

          <div v-for="item in dialoglist" >
                <ul v-if="item.type==0">
                  <li class="user"  style="width:auto;">
                    <div class="pic"></div>
                    <div class="text" style="float:none;">
                      <div class="text_info">
                        <span class="info">{{item.questionContent}}</span>
                      </div>
                      <div class="text_time">时间·{{item.createTime}}</div>
                    </div>
                  </li>
                </ul>



              <ul v-if="item.type==1" >
                <li class="customer">
                  <div class="pic"></div>
                  <div class="text"><div class="text_info"><span class="info">{{item.answer}}</span></div><div class="text_time">时间·2017/10/9 23:41:54</div></div>
                </li>
              </ul>
            </div>


          <div class="send_text">
            <textarea id="replyContent" placeholder="请填写信息内容">{{newQuestion}}</textarea>
            <button type="button" id="replyBT" class="as_but inputwd300" style="width:200px; margin-top:60px; margin-left:240px;"> 提交</button>
          </div>
        </div>



      </div>
      <div class="loading" id="popLoading" style="display: none;"></div>
    </div>
  </div>
  <script>



      var app2 = new Vue({
          el: '#parentBorder',
          data: {
              message: '页面加载于 ' + new Date().toLocaleString(),
              dialoglist:"",
              newQuestion:""
          },
          methods:{
              getUserDialog:function (questionId) {
                  var tempThis = this;
                  axios.post('/getUseRquestionDialog', {
                      questionId:questionId
                  }).then(function (response) {
                      tempThis.dialoglist = response.data.jsonData;
                      console.log(response);
                  }).catch(function (error) {
                      console.log(error);
                  });

              },
              addNewUserQuestion:function (questionId,newQuestion) {

                  var tempThis = this;
                  axios.post('/addNewQuestion', {
                      questionId:questionId,
                      newQuestion:newQuestion
                  }).then(function (response) {

                      tempThis.dialoglist = response.data.jsonData;
                      console.log(response);
                  }).catch(function (error) {
                      console.log(error);
                  });
                  
              }

          }
      })


      $("replyBT").click(function () {
          //app2.addNewUserQuestion();
      })


      $('.jkp').click(function () {
          var questionId = $(this).attr("questionId");
          app2.getUserDialog(questionId);
          var m_popObj = $(".m_pop");
          m_popObj.show();
      })


  </script>

</div>

</body>
</html>
